<template>
  <div>
    <!-- 按钮权限 -->
    <!-- {{$refs.tree.getCheckedKeys()}} -->
    <!-- {{squaredata}} -->
    <!-- {{pitchon}} -->
    <el-tree class="eltree" :data="T_data" show-checkbox node-key="id" ref="tree" :default-checked-keys="C_arr_data" :props="defaultPropsLeft" @node-click="NodeClick" @check-change="checkChange"></el-tree>
  </div>
</template>
<script>
export default {
  props: ['squaredata', 'pitchon'],
  data() {
    return {
      //选中的
      C_arr_data: [],
      checkChangeData: [],
      piton: [],
      //   C3:this.$refs.tree.getCheckedKeys(),
      //数据
      T_data: [],
      //属性
      defaultPropsLeft: {
        children: 'children',
        label: 'name',
      },
    }
  },

  mounted() {
    console.log('小方块节点！———', this.pitchon.data, this.squaredata)
    // this.$refs.tree.setCheckedKeys([]);
    this.T_data = JSON.parse(JSON.stringify(this.squaredata))
    this.piton = JSON.parse(
      JSON.stringify((this.pitchon && this.pitchon.data) || {})
    )
    console.log('小方块节点！——————————')
    console.log(this.pitchon.data)
    console.log(this.pitchon)
    let ARR = this.pitchon.data
    let B = []
    if (this.pitchon['data']) {
      if (this.pitchon['data'].length > 0) {
        ARR.forEach((val) => {
          B.push(val.buttonId)
        })
      }
    }
    console.log(B)
    this.$refs.tree.setCheckedKeys(B)
    let getCN = this.$refs.tree.getCheckedNodes()
  },
  watch: {
    C_arr_data: {
      handler(newValue, oldValue) {
        console.log('当前选中的>>>>>')
        let pitc = JSON.parse(JSON.stringify(this.pitchon))
        let newVD = pitc.concat(newValue)
        this.$bus.$emit('BackPitchArr', newValue)
      },
      deep: true,
    },
    pitchon: {
      handler(newValue, oldValue) {
        console.log('qqqqqqqqqqqqqqqqqq')
        console.log(newValue)
        let Arrdf = []
        for (let i = 0; i < newValue.length; i++) {
          let obj = { id: '', name: '', x: 0, y: 12, w: 4, h: 6, i: 3 }
          obj['id'] = newValue[i]['buttonId']
          obj['i'] = newValue[i]['buttonId'] * 1
          obj['name'] = newValue[i]['name']
          obj['x'] = newValue[i]['x']
          obj['y'] = newValue[i]['y']
          obj['w'] = newValue[i]['w']
          obj['h'] = newValue[i]['h']
          Arrdf.push(obj)
        }
        //回显打勾
        console.log('________________')
        console.log(Arrdf)
        let idArr = []
        Arrdf.forEach((val) => {
          idArr.push(val.id)
        })
        this.$refs.tree.setCheckedKeys(idArr)

        //   this.T_data = JSON.parse(JSON.stringify(this.squaredata));
        //   let P = JSON.parse(JSON.stringify(this.pitchon));
        //   this.piton=P.data
        // console.log("小方块节点！——————————2");
        // let ARR = this.pitchon.data;
        // let B = [];
        // if (this.pitchon["data"]) {
        //   if (this.pitchon["data"].length > 0) {
        //     ARR.forEach(val => {
        //       B.push(val.buttonId);
        //     });
        //   }
        // }
        // console.log(B);
        // this.$refs.tree.setCheckedKeys(B);
        // let getCN = this.$refs.tree.getCheckedNodes();
      },
      deep: true,
    },
  },
  methods: {
    //点击节点
    NodeClick(val) {
      console.log('点击节点')
      console.log(val, this.pitchon)
    },
    //节点发生变化
    checkChange(val) {
      this.checkChangeData.push(val)
      console.log('节点发生变化', val)

      // console.log('----------------------')
      // console.log(this.pitchon)
      // let olArr=[]
      // for(let i=0;i<this.pitchon.length;i++){
      //   let Old={id: "", name: "", x: 0, y: 0, w: 0, h: 0, i: 0}
      //   Old['id']=this.pitchon
      // }

      let XZ = this.$refs.tree.getCheckedNodes()
      console.log(XZ)
      this.$emit('backsquare', XZ)
    },
  },
}
</script>
<style lang="scss" scoped>
.eltree {
  background: #f0f4fa;
}
</style>
